<template>
	<view class="cart-page">
		<view class="cart-tip-panel" v-if="cartProducts.length==0">
			<view class="cart-tip-title">
				购物车快饿瘪了(+_+)
			</view>
			<view class="cart-tip-text">
				快给我挑点宝贝
			</view>
			<view class="cart-tip-btn">
				<button class="cu-btn round line-red" @tap="goToIndex()">去逛逛</button>
			</view>
		</view>
		<view v-else>
			<view class="cart-product-panel">
				<uni-swipe-action  v-for="(item,index) in cartProducts" :key="index" :options="options" :obj="item" @click="bindClick">
					<view class="cart-pro-flex">
						<view style="width: 15%; text-align: center;">
							<checkbox class='round red' :class="item.checked?'checked':''" :checked="item.checked" @tap="checkItem(index)"></checkbox>
							<!-- <radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio> -->
						</view>
						<view style="width: 25%;">
							<image class="product-pic" :src="item.pic" mode="aspectFill"></image>
						</view>
						<view class="cart-pro-detail" style="width: 60%;">
							<view style="font-size: 30upx; padding-right: 30upx;">{{item.name}}</view>
							<view style="font-size: 28upx; color: #8799A3; padding: 15upx 0;">size:M</view>
							<view style="display: flex; justify-content: space-between;">
								<view style="font-size: 35upx; color: #E54D42; font-weight: 400;">${{item.price}}</view>
								<view style="padding: 0 40upx;"><uni-number-box :value="item.num" :obj="item" @change="change"/></view>
							</view>
						</view>
					</view>
				</uni-swipe-action>
			</view>
			<view class="cu-bar bg-white tabbar border shop cart-bottom-bar">
				<view style="width: 35%; padding: 0 30upx;">
					<checkbox class='round red' :class="allChecked?'checked':''" :checked="allChecked" data-checked="allChecked" @tap="checkAll"></checkbox>
					<text style="margin-left: 20upx;">已选({{checkedNum}})</text>
				</view>
				<view style="width: 35%; text-align: right; font-size: 40upx; color: #E54D42; font-weight: 500; padding-right: 30upx;">
				$106
				</view>
				<view class="bg-red submit">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		components: {
			uniNumberBox,
			uniSwipeAction
		},
		data() {
			return {
				cartProducts: [
					{
						_id: 'lkjsdfkjiuisdfij',
						name: '时髦的镶边十字形的礼服',
						pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160810112221_81491.jpg',
						price: 207.90,
						num: 2,
						checked: false
					},
					{
						_id: 'lksdfsfkjiuisdfij',
						name: '对时尚按钮点缀空心网状针织靴子妇女的袖口',
						pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160722142719_52348.jpg',
						price: 1007.90,
						num: 1,
						checked: false
					},
					// {
					// 	_id: 'lkjsdfkjiuisdfij',
					// 	name: '时髦的镶边十字形的礼服',
					// 	pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160810112221_81491.jpg',
					// 	price: 207.90,
					// 	num: 2,
					// 	checked: false
					// },
					// {
					// 	_id: 'lkjsdfkjiuisdfij',
					// 	name: '时髦的镶边十字形的礼服',
					// 	pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160810112221_81491.jpg',
					// 	price: 207.90,
					// 	num: 2,
					// 	checked: false
					// },
					// {
					// 	_id: 'lkjsdfkjiuisdfij',
					// 	name: '时髦的镶边十字形的礼服',
					// 	pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160810112221_81491.jpg',
					// 	price: 207.90,
					// 	num: 2,
					// 	checked: false
					// },
					// {
					// 	_id: 'lkjsdfkjiuisdfij',
					// 	name: '时髦的镶边十字形的礼服',
					// 	pic: 'http://img.fecshoptest.com/media/catalog/product/cache/bd935443df1c50537d4edaab4af5d446/150/150/2/01/20160810112221_81491.jpg',
					// 	price: 207.90,
					// 	num: 2,
					// 	checked: false
					// },
				],
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				allChecked: false,
				checkedNum: 0,
			}
		},
		methods: {
			goToIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			change(data) {
				console.log("data==========" + data)
				// console.log("object==========" + obj.name)
				let item = this.getProItemById(data.obj._id)
				if (item) {
					item.num = data.value
				}
				console.log("product num==========" + this.cartProducts[0].num)
			},
			getProItemById(proId) {
				let item = null
				for (let index = 0; index < this.cartProducts.length; index++) {
					if (this.cartProducts[index]._id == proId) {
						item = this.cartProducts[index]
						break
					}
				}
				return item
			},
			bindClick(data) {
				console.log(data)
			},
			checkItem(index) {
				let checked = this.cartProducts[index].checked
				this.cartProducts[index].checked = !checked
				console.log(this.cartProducts[index].checked)
				this.calcCheckedNum()
			},
			checkAll() {
				this.allChecked = !this.allChecked
				console.log(this.allChecked)
				for (let index = 0; index < this.cartProducts.length; index++) {
					this.cartProducts[index].checked = this.allChecked
				}
				this.calcCheckedNum()
			},
			calcCheckedNum() {
				let num = 0
				for (let index = 0; index < this.cartProducts.length; index++) {
					if (this.cartProducts[index].checked) {
						num++
					}
				}
				this.checkedNum = num
			}
		}
	}
</script>

<style>
	/* .cart-page {
		height: 100vh;
		background-color: #E5E5E5;
	} */
	.cart-tip-panel {
		padding: 100upx 0;
	}
	.cart-tip-title {
		text-align: center;
		font-size: 35upx;
		color: #757575;
	}
	.cart-tip-text {
		margin-top: 50upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
	}
	.cart-tip-btn {
		margin-top: 50upx;
		text-align: center;
	}
	.cart-pro-flex {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		padding: 30upx 0;
		border-top: #E5E5E5 solid 1upx;
	}
	.product-pic {
		width: 100%;
		height: 200upx;
	}
	.cart-pro-detail {
		display: flex;
		flex-direction: column;
	}
	.cart-product-panel {
		margin-bottom: 100upx;
		background-color: #E5E5E5;
	}
	.cart-bottom-bar {
		position: fixed;
		width: 100%;
		z-index: 100;
		border: #E5E5E5 solid 1upx;
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */
		/* #ifdef H5 */
		bottom: 90upx;
		/* #endif */
	}

</style>
